<template>
  <!-- 用于多张图片上传 -->
  <div>
    <el-upload
      class="avatar-uploader"
      :action="addressUrl"
      :headers="headers"
      :show-file-list="showFileList"
      :accept="accept"
      :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess"
      :file-list="fileList"
      :limit="limit"
      :list-type="listType"
      :on-exceed="handleExceed"
    >
      <i class="el-icon-plus"></i>

      <!-- <el-button
    v-if="fileList.length <= limit"
    class="el-icon-plus avatar-uploader-icon"
  >上传图片</el-button> -->
      <div class="el-upload__tip" slot="tip">{{ description }}</div>
    </el-upload>
    <!-- <el-dialog :visible.sync="dialogVisible" v-show="true">
      <img width="100%" :src="dialogImageUrl" alt="">111
    </el-dialog> -->
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";

export default {
  name: "SSUploadImg",
  props: {
    listType: {
      type: String,
      default: 'picture'
    },
    description: {
      default: "",
      type: String,
    },
    addressUrl: {
      type: String,
      default: process.env.VUE_APP_BASE_API + "/common/upload",
    },
    headers: {
      type: Object,
      default: () => ({
        Authorization: "Bearer " + getToken(),
      }),
    },
    accept: {
      type: String,
      default: "image/png,image/jpg",
    },
    showFileList: {
      type: Boolean,
      default: true,
    },
    fileList: {
      type: Array,
      default: [],
    },
    limit: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      imgList: [],
      // dialogImageUrl: '',
      // dialogVisible: false,
    };
  },
  created() {},
  methods: {
    // 图片超出限制
    handleExceed() {
      this.$message.error(`最多上传${this.limit}张图片`)
    },
    // 上传图片
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    handleAvatarSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      this.imgList = fileList;
      this.$emit("img-change", this.imgList); // 触发 img-change 事件并传递图片数据
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 6rem;
  height: 6rem;
}
::v-deep .el-upload--picture-card {
  width: 6rem;
  height: 6rem;
}
::v-deep .el-upload--picture-card i {
  display: block;
  line-height: 3.5;
}
</style>
